<template>
    <Pie :percent="true" :config="config" title="物流类型排行" desc="Pie1" />
</template>

<script setup>
import {ref, reactive} from 'vue';
import {getTotal} from '../utils';
import Pie from '../components/Pie.vue';

const data = [
    {value: 70, name: '网货业务', unit: '吨'},
    {value: 30, name: '合同业务', unit: '吨'},
    {value: 40, name: '业务3', unit: '吨'},
];

const total = getTotal(data);
const config = ref({
    color: [
        ['#80DAFE', '#379FF5'],
        ['#FFB006', '#FF971B'],
        ['#FF971B', '#379FF5'],
    ],
    title: {
        text: `总运量\n${total}(吨)`, // 可以设置中心的标题
        left: 'center',
        top: '45%', // 调整标题位置
        textStyle: {
            fontSize: 14,
            lineHeight: 22,
            color: '#151B26', // 标题的颜色
        },
    },

    series: [
        {
            radius: ['40%', '65%'],
            formatter: item => {
                const {value, name, unit} = item.data;
                return `${name}\n${value}${unit}`;
            },
            data,
        },
    ],
});
</script>

<style scoped></style>
